<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>TPage</title>
<link rel="stylesheet" type="text/css" href="${Domain}common/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="${Domain}common/easyui/themes/icon.css">
<script type="text/javascript" src="${Domain}common/easyui/jquery.min.js"></script>
<script type="text/javascript" src="${Domain}common/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="${Domain}common/easyui/locale/easyui-lang-zh_CN.js"></script>

<style type="text/css">
.layout-panel {
    position: absolute;
    overflow: visible;
}
.tg-page{
width:795px;
background-color: #FFFFFF;
min-height: 1090px;
margin:0 auto;
position:relative;
}
</style>
</head>
<body class="easyui-layout">


<div data-options="region:'north'" style="height:40px">
      <div class="easyui-panel" style="padding:5px;">
        <a href="#" class="easyui-splitbutton" data-options="menu:'#mm-file'">文件</a>
        <a href="#" class="easyui-splitbutton" data-options="menu:'#mm-edit'">编辑</a>
        <a href="#" class="easyui-splitbutton" data-options="menu:'#mm-show'">视图</a>
        <a href="#" class="easyui-splitbutton" data-options="menu:'#mm-help'">帮助</a>
    </div>
    <div id="mm-file" style="width:150px;">
    <div>
            <span>新建</span>
            <div>
                <div>空文件</div>
                <div>模板一</div>
                <div>模板一</div>
                <div>模板一</div>
            </div>
        </div>
        <div >打开</div>
        <div class="menu-sep"></div>
        <div>保存</div>
        <div>保存为</div>
        <div class="menu-sep"></div>
        <div>退出</div>
    </div>
    <div id="mm-edit" style="width:100px;">
        <div >还原修改</div>
        <div >恢复修改</div>
        <div class="menu-sep"></div>
        <div>剪切</div>
        <div>复制</div>
        <div>粘贴</div>
        <div class="menu-sep"></div>
        <div>删除</div>
        <div>选择全部</div>
        <div class="menu-sep"></div>
        <div>查找</div>
        <div>替换</div>
    </div>
     <div id="mm-show" style="width:150px;">
        <div>全屏</div>
        <div>打印预览</div>
       
    </div> 
    <div id="mm-help" style="width:150px;">
        <div>系统信息</div>
        <div>帮助文档</div>
        <div>
            <span>关于我们</span>
            <div class="menu-content" style="padding:10px;text-align:left">    
                <p style="font-size:14px;color:#444">TngouPage（TPage）电子病历模板</p>
            </div>
        </div>
    </div>  
        
</div>

<div data-options="region:'east',split:true" title="信息" style="width:200px;">

    <div class="easyui-accordion" style="width:100%;height:100%">
        <div title="属性"  style="overflow:auto;padding:10px;">
        </div>
        <div title="参数" data-options="" style="padding:10px;">
        </div>
        <div title="说明" data-options="" style="padding:10px;">
           
        </div>
    </div>


</div>
<div data-options="region:'west',split:true" title="库文件" style="width:200px;">


    <div class="easyui-accordion" style="width:100%;height:100%">
        <div title="布局" data-options="" style="padding:10px;" >
        <div  id="d1" class="easyui-linkbutton drag" style="width:100%;text-align: left; margin-bottom:5px;" data-options="">页首</div>
        <div class="easyui-linkbutton" style="width:100%;text-align: left;margin-bottom:5px;" data-options="">页未</div>
        <div class="easyui-linkbutton" style="width:100%;text-align: left;margin-bottom:5px;" data-options="">面板</div>
		<div class="easyui-linkbutton" style="width:100%;text-align: left;margin-bottom:5px;" data-options="">分行</div>
          
        </div>
        <div title="元素" data-options="" style="padding:10px;">
            
           <#list attributes as item> 
            <div   class="easyui-linkbutton drag" style="width:100%;text-align: left; margin-bottom:5px;" data-options="">${item.name}-${item.text}</div>
            </#list>
        </div>
        <div title="其他" data-options="" style="padding:10px;">
           
        </div>
    </div>

</div>
<div data-options="region:'center'" >
 
     <div class="easyui-tabs" style="width:100%;height:100%">
        <div  title="${template.name!}"   style="padding:20px;background-color: #999;"  >       
        ${template.html!'<div id="target"  class="tg-page droppable"></div>'}        
        </div>
       
    </div>
          
</div>
   
<script type="text/javascript">


    $('.drag').draggable({
        revert:true,
        proxy:function(source){
    		var p = $('<div style="background-color: #999;">proxy</div>');
    		p.appendTo('body');
    		return p;
    	}
    });
    $('#target').droppable({
    	  accept:'#d1',
          onDragEnter:function(e,source){
             
          },
          onDragLeave:function(e,source){
             
          },
          onDrop:function(e,source){

            $(this).append('<div class="drag1" style="width:100%;height:150px;background:#fafafa;border:1px solid #ccc;">123</div>')
            $('.drag1').draggable({
                proxy:'clone'
            });
            
       	 }
    });


</script>

</body>
</html>